<template>
  <view class="address">
    <view class="hander">
      <image src="../../static/zuo1.png" mode="" @click="goback"></image>
      <view class="aaa">微信支付</view>
    </view>
    <view class="addresslist">
      <view class="address_item" v-for="item in addresslist" :key="item.id">
        <view class="address_item_1">
          <text>{{ item.username }}</text>
          <text class="default" v-if="item.default">默认</text>
          <text>{{ item.phone }}</text>
        </view>
        <view class="address_item_2">{{ item.address }}</view>
      </view>
    </view>
    <view class="addressadd">
      <view class="addressadd1">新增地址</view>
      <view class="addressadd2">微信获取</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addresslist: [
        {
          id: 1,
          address: "街道口",
          username: "陈小姐",
          phone: "1520000000",
          default: true,
        },
        {
          id: 2,
          address: "街道口",
          username: "陈小姐",
          phone: "1520000000",
          default: false,
        },
      ],
    };
  },
  methods: {
    goback() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

page {
  background-color: #f8f8f8;
}

.address {
  padding-top: 80rpx;
  font-family: "Poppins";
}

.hander {
  display: flex;
  align-items: center;
  padding: 0rpx 20rpx;
  height: 50rpx;
  margin-bottom: 40rpx;

  image {
    width: 40rpx;
    height: 40rpx;
  }

  .aaa {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    font-weight: 600;
  }
}

.addresslist {
  padding: 0rpx 20rpx;

  .address_item {
    background-color: #fff;
    padding: 20rpx 30rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;

    .default {
      flex: 1;
      color: red;
      margin-left: 10rpx;
    }

    .address_item_1 {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      color: #000;
      font-weight: 600;
      margin-bottom: 10rpx;
    }
    .address_item_2 {
      font-size: 28rpx;
      color: #adadad;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #ededed;
      margin-bottom: 10rpx;
    }
  }
}

.addressadd {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: fixed;
  bottom: 50rpx;
  left: 0;
  width: 100%;

  .addressadd1 {
    background: #eea427;
    padding: 10rpx 30rpx;
    color: #fff;
    font-size: 28rpx;
    height: 40rpx;
    border-radius: 30rpx;
    text-align: center;
  }
  .addressadd2 {
    background: #45af35;
    padding: 10rpx 30rpx;
    color: #fff;
    font-size: 28rpx;
    height: 40rpx;
    border-radius: 30rpx;
  }
}
</style>